<template>
	<view class="content">
		<topBox :buttonShow="false"></topBox>
		<!-- <view class="tips">
			聘到一个员工给400块钱。每个工人上班一小时，提成2块钱，年底请大家KTV,人只要带到工厂交给小王（138XXXX12456)就可以了。
		</view> -->
		<view class="list-wrap">
			<view class="list-item">
				<view class="item-title">
					<text class="name">
						{{ form.recruit_type_work }}
					</text>
					<text class="price">{{ form.recruit_salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">具体要求：</text>
						<view class="txt-con">{{ form.recruit_requirement }}</view>
					</view>
					<view class="flex-row">
						<view class="row">
							<view>
								应聘人数：
								<text class="light">{{ form.recruit_user_num }}/{{ form.recruit_user_num }}</text>
							</view>
							<view>
								分享：
								<text class="light">{{ form.recruit_share_num }}</text>
							</view>
						</view>
						<view class="row">
							<view class="status">
								<text>状态：</text>
								<text v-if="form.recruit_status == 2">发布</text>
								<text v-if="form.recruit_status == 1">下架</text>
							</view>
						</view>
					</view>
					<view class="con-row">
						<text class="txt">留言：</text>
						<view class="txt-con">{{ form.recruit_content || ''}}</view>
					</view>
					<view class="flex">
						<view class="img-box">
							<image v-for="picitem in form.recruit_pic" :key="picitem.images_id" class="img" :src="picitem.images_url" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<u-form :model="subForm" ref="subForm">
					<u-form-item label="联系电话" label-width="100px" prop="link_tel" required>
						<u-input border type="text" v-model="subForm.link_tel" />
					</u-form-item>
					<u-form-item label="补充招聘要求" label-width="100px" prop="content" required>
						<u-input border auto-height type="textarea" maxlength="-1" v-model="subForm.content" />
					</u-form-item>
					<!-- <u-form-item label="岗位状态" prop="recruit_status" label-width="100px">
						<u-radio-group v-model="subForm.recruit_status">
							<u-radio name="1">下架</u-radio>
							<u-radio name="2">上架</u-radio>
						</u-radio-group>
					</u-form-item> -->
				</u-form>
				<u-button type="primary" @click="suerPublish">确定发布认领</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import topBox from '../../components/top-box/top-box.vue';
export default {
	components: {
		topBox
	},
	data() {
		return {
			loadStatus: 'nomore',
			params: {
				startRow: 1,
				rowSize: 6,
				latitudes: 32,
				longitudes: 43,
				status: 'FB'
			},
			list: [],
			form:{
				
			},
			subForm: {
				recruit_status: 2,
				link_tel: null,
				content: null,
				recruit_uid: null
			},
			userId: '',
			recruit_id: 0,
			ID: '',
			rules: {
				link_tel: [
					{
						required: true,
						message: '联系电话 必填',
						trigger: ['change','blur']
					}
				],
				content: [
					{
						required: true,
						message: '招聘补充内容 必填',
						trigger: ['change','blur']
					}
				],
			}
		};
	},
	computed: {
		...mapState({
			// userId: state => state.userId
		})
	},
	onShow() {},
	onLoad(e) {
		this.userId = uni.getStorageSync('userId')
		let token = uni.getStorageSync('token')
		this.form.id = e.recruit_id
		this.recruit_id = e.recruit_id
		console.log(e)
		if(e.id) {
			this.ID = e.id
		}
		this.getDetail();
	},
	onReady() {
		this.$refs.subForm.setRules(this.rules);
	},
	methods: {
		suerPublish(){
			this.$refs.subForm.validate(valid => {
				if (valid) {
					this.$u.api.smallSaveOrUpdate({
						...this.subForm,
						recruit_id: this.recruit_id,
						recruit_uid: this.form.recruit_uid,
						id: this.ID || 0
					}).then(res => {
						if (res.status == true) {
							uni.showToast({
								title: res.msg,
								duration: 2000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			})
			
		},
		getDetail() {	
			// smallGetRecruitInfo  postGetActivityInfo
			let getData
			if(this.ID) {
				getData = this.$u.api.smallGetRecruitInfo({
					id: this.ID,
					userId: uni.getStorageSync('userId')
				})
			} else {
				getData = this.$u.api.postGetActivityInfo({
					id: this.recruit_id,
					userId: uni.getStorageSync('userId')
				})
			}
			getData.then(res => {
				if (res.data) {
					this.form = res.data;
					if(this.ID) {
						this.subForm.content = res.data.content
						this.subForm.link_tel = res.data.link_tel
						this.subForm.recruit_status = '' + res.data.recruit_status
					}
					this.covers = [{
						latitude: res.data.recruit_latitude,
						longitude: res.data.recruit_longitude,
						iconPath: '../../static/image/poi_3.png',
						width: "24",
						height: "33"
					}]
				} else {
					return uni.showToast({
						title: '无数据',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	.tips{
		margin: 20upx;
		padding: 20upx;
		box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
		border-radius: 6px;
		background-color: #FFFFFF;
	}
	position: relative;
	.publish_btn{
		margin: 20upx;
	}
	.list-wrap {
		padding: 0 20upx 20upx;
		position: relative;
		z-index: 10;
		.list-item {
			padding: 30upx 20upx 10upx;
			background: #fff;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			margin-bottom: 20upx;

			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;

				.name {
					font-size: 30upx;
					font-weight: bold;
					color: rgba(101, 101, 101, 1);
				}

				.price {
					font-size: 26upx;
					font-weight: bold;
					color: rgba(236, 71, 21, 1);
				}
			}

			.item-con {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				margin-bottom: 10upx;
				padding-bottom: 10upx;

				.con-row {
					display: flex;
					font-size: 24upx;
					font-weight: 500;
					color: rgba(101, 101, 101, 1);
					line-height: 34upx;
					margin-bottom: 18upx;

					.txt {
						flex: none;
						color: #999;
						margin-right: 10upx;
					}

					.txt-info {
						flex: 1;
					}
				}

				.flex-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.row {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 18upx;
					}
				}

				.img-box {
					flex: 1;
					margin-right: 20upx;

					.img {
						width: 90upx;
						height: 90upx;
						border-radius: 6px;
						margin-right: 10upx;
					}
				}
			}

			.light {
				color: #333;
				margin: 0 6upx;
			}
		}
	}
}
.bottom{
	padding: 20upx;
	background-color: #FFFFFF;
}
</style>
